import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { withRouter, Link } from 'react-router-dom';
import { Tools, Icon, SearchBar, Tag } from 'weaver-mobile';
import { SearchAdvanced, ListViewPage } from 'weaver-mobile-page';
import { parseQueryString, getFontColorFromBgHex, compareParams } from '../../util';
import RouteModal from '../communication/RouteModal';
import { renderNoData } from '../public';

const getLabel = Tools.getLabel;
const store = [
  'hrmJoinStore', 
  'mainStore',
  'centerStore',
]
@withRouter
@inject(...store)
@observer
export default class HrmJoin extends React.Component {

  static defaultProps = {
    prefixCls: 'cowork-hrm',
  }

  componentWillMount() {
    const { location: { search }, mainStore, hrmJoinStore: { setStoreState }, centerStore } = this.props;
    const { getUserInfo } = centerStore;
    const parmsobj= parseQueryString(search);
    let searchHrmid = parmsobj.searchHrmid ? parmsobj.searchHrmid : "0";
    getUserInfo();
    mainStore.setStoreState({ visible: true });
    setStoreState({searchHrmid: searchHrmid})
  }

  componentDidMount() {
    const { hrmJoinStore: { getAdSearchCondition, getJoinList } } = this.props;
    getAdSearchCondition();
    getJoinList();
  }

  componentWillUnmount() {
    const { hrmJoinStore: {clear}, mainStore } = this.props;
    mainStore.setStoreState({ visible: false });
    clear();
  }

  // 自定义渲染模板
  getTemplate = () => {
    const prefixCls = 'cowork-communication';
    const { hrmJoinStore: { searchHrmid }, centerStore: { userInfo } } = this.props;
    const isMe = userInfo.id && userInfo.id * 1 === searchHrmid * 1;
    const newTemp = {
      json: [{
        key: 'col_1',
        render: (data) => {
          const { name, lastdiscussantspan, id, id_strspan, approvalAtatus } = data;
          let labelBycoworkList = JSON.parse(id_strspan);
          return (
            <div className={`${prefixCls}-coworkList-line`} key={id}>
              <div className={`${prefixCls}-coworkList-line-info`}>
                <span className={`${prefixCls}-coworkList-line-name`}>
                  {approvalAtatus === '1' && <span className={`${prefixCls}-coworkList-line-pending`}>【{getLabel(2242,'待审批')}】</span>}
                  {name}
                </span>
                {
                  isMe && labelBycoworkList && labelBycoworkList.length !== 0 && labelBycoworkList.map((v, index) => {
                    return (
                      <Tag 
                        key={index} 
                        style={{color: v.labelColor === '' ? '#333' : getFontColorFromBgHex(v.labelColor), background: v.labelColor}}
                      >{v.labelName}</Tag>
                    )
                  })
                }
                <span className={`${prefixCls}-coworkList-line-lastTime`}>{getLabel(83227,'最后发表')}：{lastdiscussantspan}</span>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  onRowClick = (v) => {
    this.props.history.push(`${this.props.location.pathname}/detail?id=${v.id}`)
  }
  
  render(){
    const { prefixCls, hrmJoinStore: { search, joinList, updateJoinAdvance, joinAdValue, setStoreState, getJoinList, doJoinReset } } = this.props;
    const datas = toJS(joinList.data);
    const buttonGroupData = [
      { key: 'reset',
        text: getLabel(2022,"重置"),
        onClick: doJoinReset
      },
      { key: 'submit',
        text: getLabel(826,"确定"),
        onClick: () => {
          getJoinList();
          this.props.history.go(-1);
        },
        type: 'primary',
      }
    ];
    let compare = true;
    if (search) {
      compare = compareParams(toJS(search.form.formData), toJS(search.form.defaultValues));
    }
    const adType = compare ? 'filter-o' : 'filter-o-hot';
    return (
      <div className={prefixCls}>
        <SearchBar 
          placeholder={getLabel(390654,"请输入主题")}
          value={joinAdValue}
          showExtraButton
          extraButton={[
            { key: 'advanced', show: <Link to={search.path}><Icon key={adType} type={adType} /></Link> },
          ]}
          onChange={val => updateJoinAdvance(val)}
          onSubmit={getJoinList}
        />
        <SearchAdvanced 
          store={search}
          buttonGroupData={buttonGroupData} 
          onChange={(condition, value) => {if(condition.domkey[0] === 'name') { setStoreState({ joinAdValue: value }); }}}
        />
        <div className={`${prefixCls}-list`}>
          {
            datas.length === 0 ? renderNoData : (
              <ListViewPage.Normal
                store={joinList}
                getTemplate={this.getTemplate}
                customHeight='100%'
                onRowClick={this.onRowClick}
              />
            )
          }
        </div>
        <RouteModal/>
      </div>
    );
  }  
}